import { formatURL, setBrowseNumber } from "./base.js";
import { checkCode, add } from "./request.js";
if ($(document.body).width() < 992) {
	$(".tabbar_c .collapse").removeClass("show");
    $(".container_m .collapseNotice").removeClass("show");
	$(".collapseBtn .mb-0").html($(".tabbar:eq(0)").text());
	$(".collapseNoticeBtn .mb-0").html(
		$(".notice .list-group-item:eq(0)").text()
	);
}
// 须知tabbar选择
$(".collapseBtn").click(function (e) {
	if (!$("#collapseTabbar").hasClass("show")) {
		$(".collapseBtn")
			.find("i")
			.removeClass("bi-chevron-down")
			.addClass("bi-chevron-up");
	} else {
		$(".collapseBtn")
			.find("i")
			.removeClass("bi-chevron-up")
			.addClass("bi-chevron-down");
	}
});
// 须知选择
$(".collapseHoursBtn").click(function (e) {
	if (!$(".collapseHours").hasClass("show")) {
		$(".collapseHoursBtn")
			.find("i")
			.removeClass("bi-chevron-down")
			.addClass("bi-chevron-up");
	} else {
		$(".collapseHoursBtn")
			.find("i")
			.removeClass("bi-chevron-up")
			.addClass("bi-chevron-down");
	}
});
//开放时间选择
$(".collapseNoticeBtn").click(function (e) {
	if (!$(".collapseNotice").hasClass("show")) {
		$(".collapseNoticeBtn ")
			.find("i")
			.removeClass("bi-chevron-down")
			.addClass("bi-chevron-up");
	} else {
		$(".collapseNoticeBtn ")
			.find("i")
			.removeClass("bi-chevron-up")
			.addClass("bi-chevron-down");
	}
});
// 交通指引选择
$(".collapseTrafficBtn").click(function (e) {
	if (!$(".collapseTraffic").hasClass("show")) {
		$(".collapseTrafficBtn")
			.find("i")
			.removeClass("bi-chevron-down")
			.addClass("bi-chevron-up");
	} else {
		$(".collapseTrafficBtn")
			.find("i")
			.removeClass("bi-chevron-up")
			.addClass("bi-chevron-down");
	}
});

$(".tabbar_m .tabbar").click(function () {
	$(".tabbar_m .tabbar").removeClass("active");
	$(this).addClass("active");
	let dataKey = $(this).attr("data-key");
	$(".collapseBtn .mb-0").html($(this).text());
	if ($(document.body).width() < 992) {
		$(".tabbar_c .collapse").removeClass("show");
	}

	$(".container_m .container").hide();
	$(".collapseBtn ")
		.find("i")
		.removeClass("bi-chevron-up")
		.addClass("bi-chevron-down");
	$(`.${dataKey}`).show();
	if (dataKey == "notice") {
		if ($(document.body).width() < 992) {
			$(".container_m .collapseNotice").removeClass("show");
			$(".collapseNoticeBtn .mb-0").html(
				$(".notice .list-group-item:eq(0)").text()
			);
		}
		$(".antiepidemic").show();
	} else if (dataKey == "hours") {
		if ($(document.body).width() < 992) {
			$(".container_m .collapseHours").removeClass("show");
			$(".collapseHoursBtn .mb-0").html(
				$(".hours .list-group-item:eq(0)").text()
			);
		}
	} else if (dataKey == "traffic") {
		if ($(document.body).width() < 992) {
			$(".container_m .collapseTraffic").removeClass("show");
			$(".collapseTrafficBtn .mb-0").html(
				$(".traffic .list-group-item:eq(0)").text()
			);
		}

		if (!map) {
			initMap(30.536265, 114.325941);
		} else {
			map.destroy();
			marker = "";
			polylineLayer = "";
			initMap(30.536265, 114.325941);
		}
	}
});

$(".notice .list-group").on("click", "li", function () {
	$(".notice .list-group li").removeClass("active");
	$(this).addClass("active");
	$(".antiepidemic,.play").hide();
	if ($(document.body).width() < 992) {
		$(".container_m .collapseNotice").removeClass("show");
	}

	let dataName = $(this).attr("data-name");
	$(".collapseNoticeBtn .mb-0").html($(this).text());

	$(".collapseNoticeBtn ")
		.find("i")
		.removeClass("bi-chevron-up")
		.addClass("bi-chevron-down");
	$(`.${dataName}`).show();
});
$(".hours .list-group").on("click", "li", function () {
	$(".hours .list-group li").removeClass("active");
	$(this).addClass("active");
	if ($(document.body).width() < 992) {
		$(".container_m .collapseHours").removeClass("show");
	}
	$(".collapseHoursBtn .mb-0").html($(this).text());
	$(".collapseHoursBtn ")
		.find("i")
		.removeClass("bi-chevron-up")
		.addClass("bi-chevron-down");
});
$(".traffic .list-group").on("click", "li", function () {
	$(".traffic .list-group li").removeClass("active");
	$(this).addClass("active");
	if ($(document.body).width() < 992) {
		$(".container_m .collapseTraffic").removeClass("show");
	}
	$(".collapseTrafficBtn .mb-0").html($(this).text());
	$(".collapseTrafficBtn ")
		.find("i")
		.removeClass("bi-chevron-up")
		.addClass("bi-chevron-down");
	var startPosition = new TMap.LatLng(
		$(this).data("value").split(",")[0],
		$(this).data("value").split(",")[1]
	); // 路线规划起点
	var endPosition = new TMap.LatLng(30.130011, 114.494428); // 路线规划终点
	setMap(startPosition, endPosition);
});
var time = new Date().getTime();
$(".tips img").attr(
	"src",
	formatURL(`wljy/mp/manage/suggest/getCode?codeKey=${time}`)
);
$(".toast").toast({ autohide: true, delay: 2000 });
$(".tips img").click(function () {
	time = new Date().getTime();
	$(".tips img").attr(
		"src",
		formatURL(`wljy/mp/manage/suggest/getCode?codeKey=${time}`)
	);
});
$(".comfirn").click(function () {
	if ($("form .name").val() == "") {
		$(".toast-body").html("请输入姓名！").css({ color: "red" });
		$(".toast").toast("show");
	} else if ($("form .mobile").val() == "") {
		$(".toast-body").html("请输入联系方式！").css({ color: "red" });
		$(".toast").toast("show");
	} else if ($("form .email").val() == "") {
		$(".toast-body").html("请输入电子邮箱！").css({ color: "red" });
		$(".toast").toast("show");
	} else if ($("form .title").val() == "") {
		$(".toast-body").html("请输入标题！").css({ color: "red" });
		$(".toast").toast("show");
	} else if ($("form .content").val() == "") {
		$(".toast-body").html("请输入内容！").css({ color: "red" });
		$(".toast").toast("show");
	} else if ($("form .codeInput").val() == "") {
		$(".toast-body").html("请输入验证码！").css({ color: "red" });
		$(".toast").toast("show");
	} else {
		checkCode($("form .codeInput").val(), time).then((res) => {
			console.log(res);
			if (res.code == 200) {
				add({
					content: $("form .content").val(),
					email: $("form .email").val(),
					name: $("form .name").val(),
					phone: $("form .mobile").val(),
					topic: $("form .title").val()
				}).then((result) => {
					console.log(result);
					if (result.code == 200) {
						$(".toast-body").html("提交成功！").css({ color: "#1E9FFF" });
						$(".toast").toast("show");
						resetInput();
					} else {
						$(".toast-body").html(res.message).css({ color: "red" });
						$(".toast").toast("show");
					}
				});
			} else {
				$(".toast-body").html(res.message).css({ color: "red" });
				$(".toast").toast("show");
			}
		});
	}
});
$(".reset").click(function () {
	resetInput();
});
function resetInput() {
	$("form .name").val("");
	$("form .codeInput").val("");
	$("form .mobile").val("");
	$("form .content").val("");
	$("form .email").val("");
	$("form .title").val("");
	time = new Date().getTime("");
	$(".tips img").attr(
		"src",
		formatURL(`wljy/mp/manage/suggest/getCode?codeKey=${time}`)
	);
}
var map, marker, polylineLayer;
function initMap(latitude, longitude) {
	console.log(longitude, latitude);
	map = new TMap.Map("map", {
		center: new TMap.LatLng(30.130011, 114.494428),
		zoom: 14
	});
	new TMap.RectangleStyle({
		color: "gray",
		showBorder: false
	});
	var startPosition = new TMap.LatLng(latitude, longitude); // 路线规划起点
	var endPosition = new TMap.LatLng(30.130011, 114.494428); // 路线规划终点
	setMap(startPosition, endPosition);
}

function setMap(startPosition, endPosition) {
	console.log(marker);
	if (!marker) {
		marker = new TMap.MultiMarker({
			// 创造MultiMarker显示起终点标记
			id: "marker-layer",
			map: map,
			styles: {
				start: new TMap.MarkerStyle({
					width: 25,
					height: 35,
					anchor: { x: 16, y: 32 },
					src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png"
				}),
				end: new TMap.MarkerStyle({
					width: 25,
					height: 35,
					anchor: { x: 16, y: 32 },
					src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png"
				})
			},
			geometries: [
				{
					id: "start",
					styleId: "start",
					position: startPosition
				},
				{
					id: "end",
					styleId: "end",
					position: endPosition
				}
			]
		});
	} else {
		marker.setGeometries([
			{
				id: "start",
				styleId: "start",
				position: startPosition
			},
			{
				id: "end",
				styleId: "end",
				position: endPosition
			}
		]);
	}

	var driving = new TMap.service.Driving({
		// 新建一个驾车路线规划类
		mp: true, // 是否返回多方案
		policy: "PICKUP,NAV_POINT_FIRST" // 规划策略
	});
	driving.search({ from: startPosition, to: endPosition }).then((result) => {
		// // 搜索路径
		let arr = [];
		result.result.routes.forEach((step, index) => {
			arr.push({
				id: "pl_" + index,
				styleId: index == 0 ? "style_blue" : "style_gray",
				paths: step.polyline
			});
		});
		console.log(arr);
		displayPolyline(arr); // 绘制路径折线
	});
}
function displayPolyline(pl) {
	// 创建 MultiPolyline显示路径折线
	if (polylineLayer) {
		polylineLayer.setGeometries(pl);
	} else {
		polylineLayer = new TMap.MultiPolyline({
			id: "polyline-layer",
			map: map,
			styles: {
				style_blue: new TMap.PolylineStyle({
					color: "#3777FF",
					width: 8,
					borderWidth: 5,
					borderColor: "#FFF",
					lineCap: "round"
				})
			},
			geometries: pl
		});
	}
}
